<template>
    <view class="multiple-tags">
        <up-tag v-for="(item, index) in tagList" :key="index" :text="item.label"
                shape="circle" size="large" :plain="!selectValue.includes(item.value)" @tap="selectTag(item)"></up-tag>
    </view>
</template>
<script setup>
const emits=defineEmits(['change'])
const props=defineProps({
    modelValue: {
        type: Array,
        default: []
    },
    tagList: {
        type: Array,
        default: () => []
    },
    disabled:{
        type: Boolean,
        default: false
    }
})


const selectValue=useModel(props, 'modelValue')

const selectTag=(item)=>{
    if(props.disabled){
        return
    }
    if(selectValue.value.includes(item.value)){
        selectValue.value=selectValue.value.filter(i=>i!==item.value)
    }else{
        selectValue.value.push(item.value)
    }
    emits('change',selectValue.value)
}
</script>
<style scoped lang="scss">
.multiple-tags{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24rpx;
}
</style>
